<template>
  <div class="dashboard-container">
    <el-card class="tree-card">
      <!-- 传入内容 插槽内容  自动循环多次  循环多个节点
        slot-scope="对象"  作用域插槽  接收传递给插槽的数据  data每个节点对象
         -->
      <tree-tools :treeNode="company" :isRoot="true"></tree-tools>
      <el-tree :data="departs" :props="defaultProps" :default-expand-all="true">
        <tree-tools slot-scope="{ data }" 
        :treeNode="data" 
        @delDepts='getDepartments' 
        @addDepts='addDepts'
        @editDepts='editDepts'
        ></tree-tools>
      </el-tree>
    </el-card>
    <add-depts ref="addDepts" :showDialog.sync="showDialog" :treeNode="treeNode"></add-depts>
  </div>
</template>
<script>
import AddDepts from "./components/add-depts.vue"
import TreeTools from "./components/tree-tools.vue";
import {getDepartments} from '@/api/departments.js'
import { tranListToTreeData } from '@/utils';
export default {
  components: { TreeTools, AddDepts },
  data() {
    return {
      defaultProps: {
        label: "name",
      },
      company: {
        name: "xxx科技有限公司",
        manager: "负责人",
        id:''
      },
      departs: [],
      showDialog: false,  // 默认弹窗组件显示隐藏
      treeNode: {}
    };
  },
  created(){
    this.getDepartments()
  },
  methods:{
    async getDepartments(){
      let result = await getDepartments();
      this.departs = tranListToTreeData(result.depts, '')
    },
    addDepts(treeNode){
      // 点击添加子部门， 显示弹框
      this.showDialog= true;
      this.treeNode = treeNode
    },
    editDepts(treeNode){
      // 编辑部门节点 treeNode表示当前部门节点
      // 弹窗提示
      // console.log(treeNode)
      this.showDialog = true;
      // 赋值当前点击的节点  为了确定编辑
      this.treeNode = treeNode
      // 调用子组件的方法 传入id
      this.$refs.addDepts.getDepartDetail(treeNode.id);

    }
  }
};
</script>
<style scoped>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}
</style>